<template>
  <div class="home">
    <zhj-header title="页标题">
      <i class="cubeic-tag"></i>
    </zhj-header>
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <!-- 轮播图 -->
    <cube-slide :data="slider" :interval="5000">
      <cube-slide-item v-for="(item, index) in slider" :key="index">
        <router-link :to="`/detail/${item.id}`">
          <img class="slider" :src="item.img">
        </router-link>
      </cube-slide-item>
    </cube-slide>

    <!-- 商品列表 -->
    <!-- <good-list :data="goods" @cartanim="$refs.ca.start($event)"></good-list> -->
    <good-list :data="goods" @cartanim="startCartAnim"></good-list>

    <!-- 动画组件 -->
     <!-- <cart-anim ref="ca"></cart-anim> -->
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'
// import axios from 'axios'
import gs from '@/service/goods'
import GoodList from '@/components/goodslist.vue'
import CartAnim from '@/components/CartAnim.vue'
import ZhjHeader from '@/components/Header.vue'

export default {
  name: 'HomeView',
  components: {
    // HelloWorld
    GoodList,
    // CartAnim
    ZhjHeader
  },
  data() {
    return {
      goodsInfo:{},
      slider: [],
      keys: []
    }
  },
  methods: {
    startCartAnim(el) {
      // const anim = this.$createCartAnim({
      //   ontransitionend() {
      //     anim.remove()
      //   }
      // }) 
      // anim.start(el)     

      //使用方式2 / 手动创建组件实例
     const anim = this.$create(CartAnim);
     anim.start(el);
     anim.$on('transitionend',anim.remove)
    }    
  },
  computed: {
    goods() {
      return this.keys.flatMap(key=>this.goodsInfo[key])
    }
  },
  created() {
    // axios.get('/api/userinfo').then(res => {
    //   console.log(res)
    // })
    gs.getGoodsInfo().then(data => {
      if(data){
        const { goodsInfo, slider, keys } = data
        this.goodsInfo = goodsInfo
        this.slider = slider
        this.keys = keys
      }
    })
  }
}
</script>

<style lang="stylus" scoped>
.cube-slide {
  height: auto;
}
.cube-slide-item{
  width: 100%;
  height: auto;
}
.slider {
  width: 100%;
  height: 200px;
}
</style>